<template>
  <div class="home-study-time-line">
    <ul class="time-line">
      <li
        class="item"
        v-for="(v, k) in dataArr"
        :key="k">
        <location-icon class="location"/>
        <p class="title">{{ v.title }}</p>
        <p class="time">{{ v.dateStr }}</p>
        <p class="detail">{{ v.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import StudyTimeLineModel from '@/models/web/StudyTimeLineModel'
  import LocationIcon from '@/icons/location.svg'
  export default {
    name: "HomeStudyTimeLine",
    components: {
      LocationIcon
    },
    data() {
      return {
        dataArr: []
      }
    },
    methods: {
      /**
       * 获取所有数据
       */
      getAllModels() {
        StudyTimeLineModel.loadAllModels(null, true).w_then((dataArr) => {
          this.dataArr = dataArr
        })
      },
    },
    mounted() {
      this.getAllModels()
    }
  }
</script>

<style lang="scss" scoped>
  .home-study-time-line {
    padding: 20px 0;
    >.time-line {
      list-style: none;
      padding: 0;
      margin: 0;
      >.item {
        margin: 0 10px 0 25px;
        padding: 0 0 15px 25px;
        position: relative;
        border-left: 2px solid #2f84d2;
        .location {
          width: 30px;
          height: 30px;
          padding: 4px;
          fill: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #2f84d2;
          border-radius: 50%;
          position: absolute;
          left: -15px;
          top: 0;
          color: #fff;
          font-size: 30px;
        }
        .title {
          font-size: 22px;
          font-weight: 300;
          color: #374054;
          margin-top: 0px;
          margin-bottom: 0;
        }
        .time {
          font-size: 16px;
          color: #999;
          margin: 5px 0 5px 0;
        }
        .detail {
          color: #74808a;
          font-size: 16px;
          line-height: 22px;
          margin: 0;
        }
      }
    }
  }
</style>
